<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 30px;
            background-color: #ddd;
            position: relative;
            border-radius: 100px;
        }

        .a span {
            width: 30px;
            height: 30px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            /* transition: 0.3s; */

            /* 当left和right同时写的时候   左生效  跟顺序无关 */
            left: 0;
            /* right: 0; */
        }
    </style>
</head>

<body>
    <div class="a">
        <span></span>
    </div>

    <script>


        // 注意：
        //   1 css问题   不能一边写left  一边写right
        //   2 flag 用于控制开关    on向右走   off向左走
        //   3 bool 用于控制定时器  true可以点击  false不能点击
        //   4 速度的问题  终点值判断的时候   >=   <=   


        var oDiv = document.querySelector('.a');
        var oSpan = oDiv.querySelector('span');

        var flag = 'on';   // 控制开关

        var bool = true ;  // 节流    定时器开启以后一段时间不能再点击

        oSpan.onclick = function () {
            if (flag === 'on' && bool) {
                var count = 0;
                bool = false ;
                var t = setInterval(function () {
                    count += 3;   // 速度
                    oSpan.style.left = count + 'px';
                    if (count >= 70) {
                        // 跑过终点的时候，停在终点，不能跑过终点
                        count = 70;
                        oSpan.style.left = count + 'px';
                        oSpan.style.backgroundColor = '#666' ;
                        clearInterval(t);
                        flag = 'off';
                        bool = true ;
                    }
                }, 1)
            }
            else if(flag === 'off' && bool) {
                bool = false ;
                var count = 70;
                var t = setInterval(function () {
                    count -= 3;   // 速度
                    oSpan.style.left = count + 'px';
                    if (count <= 0) {
                        // 跑过终点的时候，停在终点，不能跑过终点
                        count = 0;
                        oSpan.style.left = count + 'px';
                        oSpan.style.backgroundColor = 'green' ;
                        clearInterval(t);
                        flag = 'on';
                        bool = true ;
                    }
                }, 1)
            }
        }
    </script>
</body>

</html>